<template>
  <div class="dashboard-container">
    <div class="dashboard-header">
      <h1>仪表盘</h1>
      <p>欢迎使用乐淘后台管理系统</p>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-container">
      <el-card class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" style="color: #409eff"><Document /></el-icon>
          <div class="stat-info">
            <div class="stat-label">总订单数</div>
            <div class="stat-value">1,234</div>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" style="color: #67c23a"><Coin /></el-icon>
          <div class="stat-info">
            <div class="stat-label">今日销售额</div>
            <div class="stat-value">¥12,500</div>
          </div>
        </div>
      </el-card>

      <el-card class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" style="color: #f56c6c"><Money /></el-icon>
          <div class="stat-info">
            <div class="stat-label">本月收入</div>
            <div class="stat-value">¥86,400</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 图表容器 -->
    <div class="charts-container">
      <el-card class="chart-card">
        <div ref="lineChart" class="chart" style="height: 300px;"></div>
      </el-card>

      <el-card class="chart-card">
        <div ref="barChart" class="chart" style="height: 300px;"></div>
      </el-card>

      <el-card class="chart-card">
        <div ref="pieChart" class="chart" style="height: 300px;"></div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { Document, Coin, Money } from '@element-plus/icons-vue';
import { onMounted, ref } from 'vue';

const lineChart = ref(null);
const barChart = ref(null);
const pieChart = ref(null);

// 初始化折线图（订单趋势）
const initLineChart = () => {
  if (!lineChart.value) return;
  const myChart = echarts.init(lineChart.value);
  const option = {
    title: {
      text: '订单趋势',
      left: 'center',
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110],
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#409eff',
        },
        areaStyle: {
          color: 'rgba(64, 158, 255, 0.2)',
        },
      },
    ],
  };
  myChart.setOption(option);
};

// 初始化柱状图（商品分类销售）
const initBarChart = () => {
  if (!barChart.value) return;
  const myChart = echarts.init(barChart.value);
  const option = {
    title: {
      text: '商品分类销售',
      left: 'center',
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      data: ['电子产品', '服装', '家居', '食品', '图书'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [300, 200, 150, 100, 80],
        type: 'bar',
        itemStyle: {
          color: '#67c23a',
        },
      },
    ],
  };
  myChart.setOption(option);
};

// 初始化饼图（订单状态占比）
const initPieChart = () => {
  if (!pieChart.value) return;
  const myChart = echarts.init(pieChart.value);
  const option = {
    title: {
      text: '订单状态占比',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    series: [
      {
        type: 'pie',
        radius: '60%',
        data: [
          { value: 30, name: '待付款' },
          { value: 20, name: '待发货' },
          { value: 15, name: '待收货' },
          { value: 25, name: '已完成' },
          { value: 10, name: '已取消' },
        ],
        itemStyle: {
          color: (params) => {
            const colors = ['#409eff', '#67c23a', '#f56c6c', '#e6a23c', '#909399'];
            return colors[params.dataIndex];
          },
        },
      },
    ],
  };
  myChart.setOption(option);
};

onMounted(() => {
  console.log('Dashboard mounted, initializing charts...');
  try {
    initLineChart();
    console.log('Line chart initialized');
    initBarChart();
    console.log('Bar chart initialized');
    initPieChart();
    console.log('Pie chart initialized');
  } catch (error) {
    console.error('Error initializing charts:', error);
  }
});
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: var(--main-bg, #f5f7fa);
  min-height: 100%;
}

.dashboard-header {
  margin-bottom: 30px;
}

.dashboard-header h1 {
  margin: 0;
  font-size: 28px;
  font-weight: bold;
  color: var(--text-color, #333333);
}

.dashboard-header p {
  margin: 8px 0 0 0;
  color: #909399;
  font-size: 14px;
}

/* 统计卡片 */
.stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background-color: var(--bg-color, #ffffff);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-color, #eaeaea);
  border-radius: 4px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.stat-card :deep(.el-card__body) {
  padding: 20px;
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.stat-info {
  flex: 1;
}

.stat-label {
  font-size: 12px;
  color: #909399;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: var(--text-color, #333333);
}

/* 图表容器 */
.charts-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.chart-card {
  background-color: var(--bg-color, #ffffff);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-color, #eaeaea);
  border-radius: 4px;
  padding: 0;
}

.chart-card :deep(.el-card__body) {
  padding: 20px;
}

.chart {
  width: 100%;
  min-height: 300px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .stats-container {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .charts-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 16px;
  }

  .dashboard-header h1 {
    font-size: 20px;
  }

  .stats-container {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 20px;
  }

  .stat-value {
    font-size: 18px;
  }

  .charts-container {
    gap: 16px;
  }
}
</style>